<template>
	<view class="shade flex" @tap="close" :class="show ? 'show' : ''" :style="{ '--fss': app.theme.fss() }" @touchmove.stop.prevent>
		<view class="retaining" :class="show ? 'show' : ''" @tap.stop>
			<image src="/static/img/retaining-members.png" mode="widthFix" class="image"></image>
			<view class="openRetaining flex" @tap.stop="btnTap">
				<view class="left">永久会员188元</view>
				<view class="right">立即开通</view>
			</view>
			<view class="closeBtn iconfont icon-yuyinguanbi" @tap.stop="close"></view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, defineExpose } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	/* 方法区域 */
	// 打开弹窗
	function open() {
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	// 按钮的点击
	function btnTap(type){
		close();
	}
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.shade {
		padding: 0;
		background: rgba(0,0,0,0.6);
		.retaining{
			visibility: hidden;
			transition: 0.2s all;
			transform: scale(0);
			width: 100%;
			position: relative;
			top: -110rpx;
			&.show {
				visibility: visible;
				transform: scale(1);
				animation: fadeInAndScale .2s cubic-bezier(.25,.1,.25,1.3);
				@keyframes fadeInAndScale {
					0% {
					    transform: scale(0);
					}
					70% {
					    transform: scale(1.1);
					}
					100% {
					    transform: scale(1);
					}
				}
			}
			.image{
				display: block;
				width: 100%;
			}
			.openRetaining{
				position: absolute;
				bottom: 23rpx;
				left: 220rpx;
				right: 220rpx;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-bottom: 11rpx;
				.left{
					font-size: calc(21rpx * var(--fss));
					line-height: 1.2;
					color: #666;
				}
				.right{
					font-size: calc(29rpx * var(--fss));
					margin-top: 8rpx;
					line-height: 1.2;
					font-weight: bold;
				}
			}
			.closeBtn{
				line-height: 60rpx;
				height: 60rpx;
				width: 60rpx;
				text-align: center;
				border-radius: 50%;
				color: #FFF;
				border: 2rpx solid rgba(255,255,255,0.6);
				position: absolute;
				bottom: -110rpx;
				left: 50%;
				font-size: calc(30rpx * var(--fss));
				transform: translate(-50%, 0);
			}
		}
	}
</style>